<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏切换案列</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍内容
            </div>
            <div class="item">
                规格与包装内容
            </div>
            <div class="item">
                售后保障内容
            </div>
            <div class="item">
                商品评价内容
            </div>
            <div class="item">
                手机社区内容
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('.wrap .tab_list li').click(function () {
                //1、点击上部的 li，当前li添加 current类，其余兄弟移除类
                $(this).addClass('current').siblings().removeClass('current')
                //2、点击的同时，获得当前li的索引号
                var index = $(this).index();
                //3、让下部里面相应索引号的item显示，其余的item隐藏
                $('.tab_con .item').eq(index).show().siblings().hide()
            })
        })
    </script>
</body>

</html>